<template>
  <div class="app-container">

    <el-card class="filter-container">
      <el-alert
        title="提示"
        show-icon
        description="微习惯不需要时间跨度大，更在乎的是，这个微习惯一定要“小”、“微”，在自己要求的时间内觉得能实现！"
        effect="dark"
        type="success"
      />
    </el-card>

    <el-row :gutter="24">
      <el-col :sm="24" :lg="8">
        <el-card class="table-container">
          <div slot="header" class="clearfix">
            <el-button type="text">日微习惯</el-button>

            <span class="operate-container">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="add(0)"
              >
                添加
              </el-button>
            </span>
          </div>

          <el-card
            v-for="(item,index) in dayHabits"
            :key="index"
            :class="{'item-row':index!==0}"
            shadow="hover"
          >
            <el-row :gutter="24">
              <el-col :span="24">
                <el-row>
                  <el-input
                    v-if="item.editName"
                    :ref="'editRefName' + item.id"
                    v-model="item.name"
                    size="small"
                    @keyup.enter.native="handleEditHabitName(item)"
                    @blur="handleEditHabitName(item)"
                  />
                  <el-tag @click="editName(item)">{{ item.name }}</el-tag>
                </el-row>

                <el-row style="margin-top:20px">
                  <el-tag>{{ item.description }}</el-tag>
                </el-row>
              </el-col>

              <el-col :span="24" class="item-row">
                <el-popover
                  width="200"
                  trigger="hover"
                  :content="item.award"
                >
                  <el-button slot="reference" size="small" type="success" icon="el-icon-circle-close">奖励</el-button>

                </el-popover>
                <el-button style="margin-left:20px" size="small" type="info" icon="el-icon-edit" @click="update(item)">编辑</el-button>
                <el-button size="small" type="danger" icon="el-icon-edit" @click="remove(item)">删除</el-button>
              </el-col>
            </el-row>
          </el-card>

        </el-card>

      </el-col>
      <el-col :sm="24" :lg="8">
        <el-card class="table-container">
          <div slot="header" class="clearfix">
            <el-button type="text">周微习惯</el-button>

            <span class="operate-container">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="add(1)"
              >
                添加
              </el-button>
            </span>
          </div>

          <el-card
            v-for="(item,index) in weekHabits"
            :key="index"
            :class="{'item-row':index!==0}"
            shadow="hover"
          >
            <el-row :gutter="24">
              <el-col :span="24">
                <el-row>
                  <el-input
                    v-if="item.editName"
                    :ref="'editRefName' + item.id"
                    v-model="item.name"
                    size="small"
                    @keyup.enter.native="handleEditHabitName(item)"
                    @blur="handleEditHabitName(item)"
                  />
                  <el-tag @click="editName(item)">{{ item.name }}</el-tag>
                </el-row>

                <el-row style="margin-top:20px">
                  <el-tag>{{ item.description }}</el-tag>
                </el-row>
              </el-col>
              <el-col :span="24" class="item-row">
                <el-popover
                  width="200"
                  trigger="hover"
                  :content="item.award"
                >
                  <el-button slot="reference" size="small" type="success" icon="el-icon-circle-close">奖励</el-button>

                </el-popover>
                <el-button style="margin-left:20px" size="small" type="info" icon="el-icon-edit" @click="update(item)">编辑</el-button>
                <el-button size="small" type="danger" icon="el-icon-edit" @click="remove(item)">删除</el-button>
              </el-col>
            </el-row>
          </el-card>

        </el-card>
      </el-col>
      <el-col :sm="24" :lg="8">
        <el-card class="table-container">
          <div slot="header" class="clearfix">
            <el-button type="text">月微习惯</el-button>

            <span class="operate-container">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="add(2)"
              >
                添加
              </el-button>
            </span>
          </div>

          <el-card
            v-for="(item,index) in monthHabits"
            :key="index"
            :class="{'item-row':index!==0}"
            shadow="hover"
          >
            <el-row :gutter="24">
              <el-col :span="24">
                <el-row>
                  <el-input
                    v-if="item.editName"
                    :ref="'editRefName' + item.id"
                    v-model="item.name"
                    size="small"
                    @keyup.enter.native="handleEditHabitName(item)"
                    @blur="handleEditHabitName(item)"
                  />
                  <el-tag @click="editName(item)">{{ item.name }}</el-tag>
                </el-row>

                <el-row style="margin-top:20px">
                  <el-tag>{{ item.description }}</el-tag>
                </el-row>
              </el-col>
              <el-col :span="24" class="item-row">
                <el-popover
                  width="200"
                  trigger="hover"
                  :content="item.award"
                >
                  <el-button slot="reference" size="small" type="success" icon="el-icon-circle-close">奖励</el-button>

                </el-popover>
                <el-button style="margin-left:20px" size="small" type="info" icon="el-icon-edit" @click="update(item)">编辑</el-button>
                <el-button size="small" type="danger" icon="el-icon-edit" @click="remove(item)">删除</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :title="isAdd ? '新增微习惯' : '编辑微习惯'"
      :visible.sync="editOperFormVisible"
      center
      width="30%"
    >
      <el-form
        ref="editOperForm"
        :rules="editOperFormRules"
        :model="editOperForm"
      >
        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="editOperForm.name"
            placeholder="名称"
          />
        </el-form-item>
        <el-form-item label="描述：">
          <el-input
            v-model="editOperForm.description"
            placeholder="名称"
          />
        </el-form-item>
        <el-form-item label="奖励：">
          <el-popover
            placement="right"
            title="提示"
            width="200"
            trigger="hover"
            content="微习惯保持长久时，设置一个预期奖励!心理上、生活上各种方式都可以。比如坚持每天刷牙3分钟，一年后就有一口白皙的牙齿!"
          >
            <el-input
              slot="reference"
              v-model="editOperForm.award"
              placeholder="奖励"
            />
          </el-popover>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOperFormVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSaveHabit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getList,
  updateName,
  create,
  updateById,
  removeById
} from '@/api/life/micro-habit'

const defaultListQuery = {
  sorts: '-sort'
}

export default {
  components: {
  },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),

      list: [],

      dayHabits: [],
      monthHabits: [],
      weekHabits: [],

      total: 0,
      listLoading: true,

      loading: false,

      isEdit: 0,

      isAdd: false,
      editOperFormVisible: false,
      editOperForm: {},
      editOperFormRules: {
        name: [{ required: true, trigger: 'blur', message: '缺少微习惯名' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(res => {
        this.listLoading = false

        const { data } = res

        const dayHabits = []
        const monthHabits = []
        const weekHabits = []
        data.map(item => {
          if (item.dateSpan === 0) {
            dayHabits.push(item)
          } else if (item.dateSpan === 1) {
            weekHabits.push(item)
          } else if (item.dateSpan === 2) {
            monthHabits.push(item)
          }
        })
        this.dayHabits = dayHabits
        this.monthHabits = monthHabits
        this.weekHabits = weekHabits
      })
    },
    add(dateSpan) {
      this.isAdd = true
      this.editOperForm = { dateSpan }
      this.editOperFormVisible = true
    },
    update(row) {
      this.isAdd = false
      this.editOperForm = Object.assign({}, row)
      this.editOperFormVisible = true
    },
    handleEditWishName(wish) {
      updateName(wish.id, wish.name).then(_ => {
        wish.editName = false
      })
    },
    handleSaveHabit() {
      this.$refs.editOperForm.validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const params = Object.assign({}, this.editOperForm)

            if (this.isAdd) {
              create(params).then(_ => {
                this.$message.success('新建微习惯成功！')
                this.editOperFormVisible = false
                this.getList()
              })
            } else {
              updateById(params.id, params).then(_ => {
                this.$message.success('修改微习惯成功！')
                this.editOperFormVisible = false
                this.getList()
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    remove(row) {
      this.$confirm('是否删除微习惯?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById(row.id).then(_ => {
          this.getList()
        })
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
.box-card-header {
  position: relative;

  height: 150px;
  img {
    width: 100%;
    transition: all 0.2s linear;
    &:hover {
      transform: scale(1.1, 1.1);
      filter: contrast(130%);
    }
  }
}

.bottom{
  text-align: center
}

.card-container{
  margin-top:0px;

  .el-col{
    margin-top:20px;
  }
}

.item-row{
  margin-top:20px;
}
</style>
